<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>基本设置</title>
<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/project_set.css">
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
<script src="/js/common.js"></script>
</head>
<style>
body, html {
	height: auto;
	color: #333;
}

.nav-section-header-title {
	color: #666;
}

.layui-form-item label {
	color: #999;
	width:100%;
	padding: 0 15px;
}
.layui-inline {
    vertical-align: middle;
}


</style>
<body style="overflow-y: scroll;">

	<div class="nav-section-content-container" style="padding: 0px">
		<header class="nav-header">
			<div class="nav-section-header-title">
				<span>财务设置</span>
			</div>
		</header>
		<div class="kb-form-container">

			<fieldset class="fieldset">
				<legend>收款设置</legend>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">合同签订前（<span>5</span>）天押金到期</div>
						<label class="layui-form-label">
							示例：如果设置为5，意味着会在合同开始日之前5天催付押金
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">缴租日前（<span>5</span>）天生成账单</div>
						<label class="layui-form-label">
							示例：收款日是31日，设置值为15，则会在缴租阶段前一个月的16日生成账单
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">缴租日前每（<span>5</span>）天发送账单通知</div>
						<label class="layui-form-label">
							示例：会每间隔5天发送账单给客户
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">缴租日过期（<span>5</span>）天发送催款账单</div>
						<label class="layui-form-label">
							示例：如果用户在31日未缴费,会在3天后进行催款提示
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">缴租日过期每（<span>5</span>）天发送账单</div>
						<label class="layui-form-label">
							示例：如果用户在催单后仍未付款，会每隔3天进行催促
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:80%">
						<div style="padding: 0 15px;">缴租日过期最多发送（<span>5</span>）次催款账单</div>
						<label class="layui-form-label">
							示例：如果用户在催单后仍未付款，会总共催促10次
						</label>
					</div>
					<div class="layui-inline">
						<div class="counterBox">
							<span class="subtracter">-</span>
							<input type="number" value="5">
							<span class="summator">+</span>
						</div>
					</div>
				</div>
				<div class="f-left">
					<button class="layui-btn layui-btn-radius layui-btn-normal">确定</button>
				</div>
			</fieldset>
			<fieldset class="fieldset layui-form" lay-filter="text">
				<legend>缴租日设置</legend>
				<div class="layui-form-item">
					<div class="layui-inline" style="width:15%" >
						<label class="layui-form-label">
							计算方式
						</label>
					</div>
					<div class="layui-inline" style="width:80%">
						<select name="type" lay-filter="type">
					        <option value="0">交租阶段开始日的前一个月的几号</option>
					        <option value="1" selected="selected">交租阶段开始日的前几天</option>
					      </select>
					</div>
				</div>
				<div class="layui-form-item" id="jiaozudate">
					<div class="layui-inline" style="width:15%">
						<label class="layui-form-label">
							缴租日
						</label>
					</div>
					<div class="layui-inline" style="width:80%">
						<select name="jzr" lay-filter="jzr">
					        
					      </select>
					</div>
				</div>
				<div class="f-left">
					<button class="layui-btn layui-btn-radius layui-btn-normal" >保存</button>
				</div>
				</fieldset>
				

		</div>
	</div>
</body>
<script th:inline="javascript">
var layer;
var form;
	$(function() {
		layui.config({
					base : '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
				})
				.extend({
					formSelects : 'formSelects-v3'
				})
				.use([ 'element', "layer", "form"],function() {
							layer = layui.layer;
							form = layui.form;
							initJzrSelect();
							setHeight();
							 initSettings();
							 form.on('select(type)', function(data){
								 // console.log(data.elem); //得到select原始DOM对象
								  //console.log(data.value); //得到被选中的值
								  //console.log(data.othis); //得到美化后的DOM对象
								  if(data.value == 0){
									  $("#jiaozudate").hide();
								  }else{
									  $("#jiaozudate").show();
								  }
								}); 
						});
		//保存
		$(".layui-btn").on("click",function(){
			var list = $("input[type='number']");
			var data = "";
			for(var i = 0;i < list.length;i++){
				data +=",{\"duration\":"+$(list[i]).val()+",\"status\":"+$("input[type='number']").index($(list[i]))+"}";
			}
			data +=",{\"duration\":"+$("select[name='jzr']").val()+",\"status\":6,\"type\":\""+$("select[name='type']").val()+"\"}";
			if(data != ""){
				data = "["+data.substring(1)+"]";
				$.post("/app/finance/saveSetting",{data:data},function(result){
					layer.msg(result.msg);
				})
			}
			
		})
		$(".subtracter").on("click",function(){
			var value = $(this).next().val();
			value--;
			if(value < 0){
				$(this).next().val(0);
			}else{
				$(this).next().val(value);
			}
		})
		$(".summator").on("click",function(){
			var value = $(this).prev().val();
			value++;
			if(value > 31){
				$(this).prev().val(31);
			}else{
				$(this).prev().val(value);
			}
		})
		$("input[type='number']").on("keyup",function(){
			var num = $(this).val();
			//验证正整数
			var re = /^\d+$/g
			if(re.test(num)){
				if(parseInt(num) < 0){
					num  = 0;
				}else if(parseInt(num) > 31){
					num = 31;
				}
				$(this).val(num);
			}else{
				layer.msg("请输入数值");
				$(this).val(0);
			}
			
		})
	})

	function setHeight() {
		var h = document.body.clientHeight * 1;
		window.parent.setiframeWrap(h);
	}
	function initJzrSelect(){
		var str = "";
		for(var i = 1;i <= 31;i++){
			str += "<option value="+i+">"+i+"天</option>";
		}
		$("select[name='jzr']").html(str);
		form.render('select');
	}
	//赋值
	function initSettings(){
		var s = [[${settings}]];
		for(var i = 0;i <s.length;i++){
			
			if(s[i].status == 6){
				 form.val('text',{
					  "type": s[i].type // "name": "value"
					  ,"jzr": s[i].duration
					}) 
				if(s[i].type == 0){
					$("#jiaozudate").hide();
				}else{
					$("#jiaozudate").show();
				}
			}else{
				$("input[type='number']").eq(s[i].status).val(s[i].duration);
			}
			
		}
	}
</script>
</html>